html,
body {
    background-color: aliceblue;
    width: 100%;
    height: 100%;
}

#container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#check {
    border-radius: 25px/50px;
    width: 100%;
}

#checkStart {
    position: absolute;
    left: 90%;
    top: 10%;
}

.icon-sousuo:hover {
    color: aqua;
    cursor: pointer;

}

#consult {
    position: absolute;
    display: flex;
    width: 15%;
}

#content {
    width: 90%;
    height: 90%;
    position: absolute;
    align-self: center;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas: "a b c"
        "d e f"
        "g h i"
    ;
    /* place-items:end end ; */
}

#city {
    font-size: 50px;
    place-self: center center;
    grid-column-start: span 3;
    grid-row-start: span 1;
    color: red;
}

#weather {
    place-self: center center;
    grid-column-start: span 1;
    grid-row-start: span 1;
    font-size: 50px;
    color: gray;
}

#temperature {
    place-self: center center;
    grid-column-start: span 1;
    grid-row-start: span 1;
    grid-area: h;
    font-size: 50px;
}

#winddirection {
    font-size: 50px;
    place-self: center center;
    grid-area: f;
    grid-column-start: span 1;
    grid-row-start: span 1;
    color:orange;

}

.cloud {
    grid-area: e;
    display: none;
}

.cloud>img {
    width: 100%;
    height: 100%;
}